import React,{Component} from 'react'
import {Carousel,Icon } from 'antd'
import Home from './Home.module.css'
import cate_shop from '../../data/category'
// cate_shop = cate_shop.slice(0,4)
export default class Banner extends Component{
    constructor(props){
        super(props)
        this.state={
            list:cate_shop
        }
    }
    componentWillMount(){
        let arr = this.state.list
        arr = arr.slice(0,4)
        this.setState({
            list:arr
        })
    }
    render(){
        var arr = [1,2,3,4]
        return(
            <div>
                <Carousel className={Home.banner} dotPosition={'bottom'} autoplay={true}>
                    {
                        arr.map((v,i)=>{
                            return(<div key={i}><img style={{width:'100%',
                            marginTop:'-40px'}} src={`http://118.190.54.193/BrandNews/banner_${v}.jpg`} /></div>)
                        })
                    }
                </Carousel>
                <div className="scaleNews">
                    <div className="every_shop">
                        {
                            this.state.list.map((v,i)=>{
                                return(
                                    <div key={i}>
                                       <p>{v.name}</p>
                                       <img src={v.url}/>
                                    </div>
                                )
                            })
                        }
                    </div>
                    <p style={{textAlign:'right'}}>更多&nbsp;&nbsp;&nbsp;<Icon type="right" /></p>
                </div>
            </div>
        )
    }
}